<style scoped>
	.tabbarMain {
		height: 142rpx;
		position: fixed;
		z-index: 50;
		width: 750rpx;
		flex: 1;
		bottom: 0;
	}
	.tabbarMainIphone {
		height: 256rpx;
		padding-bottom: 64rpx;
	}
	.tabBtnMina {
		width: 750rpx;
		height: 98rpx;
		position: absolute;
		z-index:2;
		bottom:0;
		flex-direction: row;
		/* #ifndef */
		padding-bottom: constant(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-top);
		/* #endif */
		display: flex;
		justify-content: space-around;
	}
	.tabBtnMinaIphone {
		height: 156rpx;
		padding-bottom: 64rpx;
	}
	.imgse {
		width: 48rpx;
		height: 48rpx;
	}
	.txtBtn {
		font-size: 24rpx;
		color: #666666;
	}
	.txtBtnSel {
		font-size: 24rpx;
		color: #DC2115;
	}
	.itmMain { 
		width: 150rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	.imgseTs {
		width: 150rpx;
		height: 140rpx;
		margin-bottom: 90rpx;
		position: relative;
		z-index:1;
		bottom: 0rpx;
	}

	.btnfixMin {
		width: 750rpx;
		height: 142rpx;
		position: absolute;
		z-index:1;
		bottom:0;
	} 
	.btnfixMinIphone {
		bottom:64rpx;
	}
	.fixTpm {
		width: 150rpx;
		height: 140rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index:0;
	}
	.imgseTsAnds {
		width: 150rpx;
		height: 150rpx;
		position: fixed;
		z-index:1;
		bottom: 10rpx;
		left: 50%;
		border-radius: 150rpx;
		transform: translateX(-50%);
	}
</style>


<!-- 
    此版本需要注意
		1、如果此项目有地图模块功能的话   整个底部建议使用<cover-view><cover-image>进行标签改版      或者判断如果当前点击等于地图模块功能时候，却换成<cover-view><cover-image>进行原生渲染
 -->
 
<template>
	
	<view class="tabbarMain" :class="[flagTypeInfo? 'tabbarMainIphone':'']">
		<image v-if="active===1" src="/static/image/tabbar/connect_active.png" :fade-show='false' class="btnfixMin"  :class="[flagTypeInfo? 'btnfixMinIphone':'']" mode=""></image>
		<image v-else src="/static/image/tabbar/connect.png" :fade-show='false' class="btnfixMin"  :class="[flagTypeInfo? 'btnfixMinIphone':'']" mode=""></image>
		<view class="tabBtnMina"  :class="[flagTypeInfo? 'tabBtnMinaIphone':'']" mode="">
			<view class="itmMain" @click.stop="switchTab(0, '/pages/index/index')">
				<image class="imgse" :fade-show='false' v-if="active===0" src="/static/image/tabbar/home_active.png"></image>
				<image class="imgse" :fade-show='false' v-else src="/static/image/tabbar/home.png"></image>
				<text class="txtBtn" :class="{'txtBtnSel' :active==0}">首页</text>
			</view>
			<view class="itmMain" @click.stop="switchTab(1, '/pages/connect/connect')">
				<view class="imgseTs" v-if="platforms != 'android'" @click.stop="switchTab(1, '/pages/connect/connect')"></view>
				<view class="fixTpm" v-if="platforms == 'android'">
					<view class="imgseTsAnds" ref='leftWidth' :style="'left:'+leftWidth+'px'"  @click.stop="switchTab(1, '/pages/connect/connect')"></view>
				</view>
			</view>
			<view class="itmMain" @click.stop="switchTab(2, '/pages/my/my')">
				<image class="imgse" :fade-show='false' v-if="active===2" src="/static/image/tabbar/my_active.png"></image>
				<image class="imgse" :fade-show='false' v-else src="/static/image/tabbar/my.png"></image>
				<text class="txtBtn" :class="{'txtBtnSel' :active==2}">我的</text>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: Number, // 当亲选择那个按钮
			platforms: '', // 终端调整兼容
			leftWidth: 0, // 安卓 端使用
			flagTypeInfo: false, // 检测当前是否是IPHONE 异形屏幕
      callbackFromParent: this.callback
		}
	},
	mounted() {
		this.flagTypeInfo = this.$is_bang;
		let tempSystem = uni.getSystemInfoSync()
		this.platforms = tempSystem.platform
		
		this.$nextTick(() => {
			// #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE ||APP-VUE
			if (this.platforms == 'android') {
				let temp = this.$refs.leftWidth
				this.leftWidth = tempSystem.screenWidth / 2
			}
			// #endif
			this.active = this.actives
		})
	},
	props:{
		actives: {
			type: Number,
			default: 0
		},
    callback: {
		  type: Function,
      default: () => Function
    }
	},
	methods: {
		/**
		 * @name 初始化当前点击索引
		 * 解决初始化闪烁图标问题
		 * */ 
		getSetting(numbers) {
			this.active = numbers || 0
		},
		/**
		 * @name tab点击事件
		 * @param {number} index 当前点击的索引
		 * @param {string} Urls 当前点击带进来的链接
		 * */ 
		switchTab(index, url) {
		  // 点击当前页面不跳转
			let pages = getCurrentPages();
			let currentRoute = pages[pages.length - 1].route;
			// currentRoute输出的是没有“/”的，所以要人为添加
			if ("/" + currentRoute === url) {
				return;
			}
      // 回调父级函数
      let result = this.callbackFromParent();
      if (!result) {
			  return;
      }
			this.active = index;
			uni.navigateTo({
				url, animationType:'none'
			})
		},

	}
}
</script>
